<template>
  <div>
    <el-row>
      <el-card>
        <table class="by-table">
          <tr>
            <th>系统订单号</th>
            <th>客户姓名</th>
            <th>客户电话</th>
            <th>目的地</th>
          </tr>
          <tr>
            <td>{{bill_info.orderId}}</td>
            <td>{{bill_info.customerName}}</td>
            <td>{{bill_info.customerPhone}}</td>
            <td>{{bill_info.destination+'-'+bill_info.streetAddress}}</td>
          </tr>
          <tr>
            <th>发运要求</th>
            <th>货运部名称</th>
            <th>货运部电话</th>
            <th>货运部地址</th>
          </tr>
          <tr>
            <td>{{bill_info.remarks}}</td>
            <td>{{bill_info.freight}}</td>
            <td>{{bill_info.freightPhone}}</td>
            <td>{{bill_info.freightAddress}}</td>
          </tr>
        </table>
        <el-row>
          <el-col>
            <fieldset v-if="bill_info.goodsInfo.tableInfo">
              <legend>&nbsp;餐桌,椅信息&nbsp;</legend>
              <div  class="text item" v-for="(item,key) in bill_info.goodsInfo.tableInfo" :key="'table'+key">
                <div>{{key+1}}, {{item.table.value}}({{item.table.name}},{{item.color|a}},{{item.material|a}},{{item.size}})------{{item.number}}张[桌]</div>
                <ul>
                  <li>台面:{{item.desktop.value}}({{item.desktop.name +','+ item.desktopSize}})---{{item.desktopNumber + '张[石]'}}</li>
                  <li>餐桌脚:{{item.footer|a}},{{item.footerMaterial|a}}</li>
                </ul>
              </div>
              <hr style="border: .5px solid #e6e6e6">
              <div class="text item order-item" v-if="bill_info.goodsInfo.chairInfo" v-for="(item,key) in bill_info.goodsInfo.chairInfo" :key="'chair'+key">
                <div>{{key+1}}, {{item.chair.value}}({{item.chair.name}},{{item.color|a}},{{item.board|a}})------{{item.number}} {{item.unit|a }}[椅]</div>
              </div>
            </fieldset>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <fieldset>
              <legend>&nbsp;茶几，电视柜</legend>
              <div  class="text item" v-if="bill_info.goodsInfo.teaTableInfo" v-for="(item, key) in bill_info.goodsInfo.teaTableInfo" :key="'teaTable'+key">
                <div>{{key+1}}, {{item.teaTable.value}}({{item.teaTable.name}},{{item.color|a}},{{item.material|a}},{{item.size}})------{{item.number}}张[茶几]</div>
                <ul>
                  <li>台面:{{item.desktop.value}}({{item.desktop.name +','+ item.desktopSize}})---{{item.desktopNumber + '张[石]'}}</li>
                  <li>餐桌脚:{{item.footer|a}}, {{item.footerMaterial|a}}[脚]</li>
                </ul>
              </div>
              <hr style="border: .5px solid #e6e6e6">
              <div  class="text item" v-if="bill_info.goodsInfo.tvTableInfo" v-for="(item, key) in bill_info.goodsInfo.tvTableInfo" :key="'tvTable'+key">
                <div>{{key+1}}, {{item.tvTable.value}}({{item.name}},{{item.color|a}},{{item.material|a}},{{item.size}})------{{item.number}}张[电视柜]</div>
                <ul>
                  <li>台面:{{item.desktop.value}}({{item.desktop.name +','+ item.desktopSize}})---{{item.desktopNumber + '张[石]'}}</li>
                  <li>餐桌脚:{{item.footer|a}},{{item.footerMaterial|a}}[脚]</li>
                </ul>
              </div>
            </fieldset>
          </el-col>
        </el-row>
        <fieldset v-if="bill_info.goodsInfo.otherInfo">
          <legend>&nbsp;备注信息&nbsp;</legend>
          <div  class="text item" v-for="(item, key) in bill_info.goodsInfo.otherInfo" :key="'other'+key">
            <div>{{item.remarks}}</div>
          </div>
        </fieldset>
      </el-card>
    </el-row>
  </div>
</template>

<script type="text/javascript">
  export default{
    name: 'billCard',
    props: {
      bill_info: ''
    },
    created() {
      // 去数据库获取货运部信息
    },
    data() {
      return {
        data: ''
      }
    }
  }
</script>

<style type="text/scss" scoped>
  ul{
    margin: 4px 0 !important;
  }
</style>
